import React, { useState, useEffect } from 'react';
import { TabBar } from 'antd-mobile';
import { ROLE } from "@/assets/js/dict.js"

import ParentHome from "@/views/Home/parent/home.js" //家长主页

import TutorHome from "@/views/Home/tutor/home.js" // home 页面
import My from "../My/my.js" // home 页面
import MyOfParent from "@/views/My/parent/myOfParent.js" // home 页面
import OrderMarket from "@/views/Order/tutor/OrderMarket"; // 订单中心



import homeActIcon from "@/assets/svg/homeAct.svg"
import homeIcon from "@/assets/svg/home.svg"
import myIcon from "@/assets/svg/my.svg"
import myActIcon from "@/assets/svg/myAct.svg"

import './main.scss';



function Main (props) {
    console.log("main----> ", props);
    let [flush, setFlush] = useState('');

    /**
     * 刷新主页的勾子
     */
    let flushMain = function () {
        setFlush(new Date().getTime());
    };
    let [selectedTab, setSelectedTab] = useState('index'); // 相当于 this.state
    useEffect(() => {
        if (!!props.location.query) {
            let q = props.location.query.selectedTab;
            if (!!q && (q === "index" || q === "my" || q === "lookFor")) {
                setSelectedTab(q);
            }
        } else {
            setSelectedTab("index");
        }
    }, [flush]);

    // console.log('$homeAct ------>>>',$homeAct) 
    let role = sessionStorage.getItem("roleVal"), isParent = role === ROLE.P;
    return (
        <div className="main">
            <TabBar >
                <TabBar.Item
                    icon={<div style={{
                        width: '22px',
                        height: '22px',
                        background: 'url(' + homeActIcon + ') center center /  21px 21px no-repeat'
                    }}
                    />
                    }
                    selectedIcon={<div style={{
                        width: '22px',
                        height: '22px',
                        background: 'url(' + homeIcon + ') center center /  21px 21px no-repeat'
                    }}
                    />
                    }
                    title="首页"
                    key="首页"
                    selected={selectedTab === 'index'}
                    onPress={() => {
                        setSelectedTab('index')
                    }}
                >
                    {isParent ? <ParentHome name={selectedTab} /> : <TutorHome name={selectedTab} />}
                </TabBar.Item>
 
                <TabBar.Item
                    icon={<div style={{
                        width: '22px',
                        height: '22px',
                        background: 'url(' + myIcon + ') center center /  21px 21px no-repeat'
                    }}
                    />
                    }
                    selectedIcon={<div style={{
                        width: '22px',
                        height: '22px',
                        background: 'url(' + myActIcon + ') center center /  21px 21px no-repeat'
                    }}
                    />
                    }
                    title="我的"
                    key="我的"
                    selected={selectedTab === 'my'}
                    onPress={() => {
                        setSelectedTab('my')
                    }}
                >
                    {isParent ? <MyOfParent /> : <My />}
                </TabBar.Item>
            </TabBar>
        </div>
    );
}

export default Main;